
<template>
  <div id="usersetting" >
    <div class="promptmsg" v-if="(priasePath !== 'appraise')">
      <div class="left"><img src="../../assets/images/user-newgift1.png" ></div>
      <div class="left txt">
        <p>欢迎注册李宁体育会员</p>
        <p>完善个人信息<span class="mark">获得新人礼</span></p>
      </div>
      <div class="btn"><a href="javascript:;" @click="routeto('membercenter')" class="txt1">跳过</a></div>
    </div>
    <p class="txtmsg">以下信息可完善</p>
    <!-- <app-Header title="完善信息"></app-Header> -->
    <group labelAlign="right " labelWidth="70px" labelMarginRight="5px">
      <div class="use-box">
        <span class="icon-star">*</span>
        <x-input title="姓名" placeholder="请输入姓名或昵称" required="required" v-model="Name"></x-input>
      </div>
      <div class="use-box">
        <span class="icon-star">*</span>
        <selector title="性别" :options="SexList" v-model="Sex" required="required" placeholder="请选择性别"></selector>
      </div>
      <div class="use-box">
        <span class="icon-star">*</span>
        <datetime v-if="isShow1" title="生日&nbsp " :max-year="2017" :min-year="1928" placeholder="请选择生日" format="YYYY"  @on-change="onSelectBirthdayChange" :display-format="resetDate" v-model="userbirth1" ></datetime>
        <datetime v-if="isShow2" title="生日&nbsp " :max-year="2017" :min-year="1928" placeholder="请选择生日" format="YYYY-MM-DD" :default-selected-value="timeDate" @on-change="onSelectBirthdayChange" v-model="userbirth" ></datetime>
      </div>
      <x-address title="省市" placeholder="请选择省市"  :list="ChinaAddressData" value-text-align="left" v-model="Address"></x-address>
      <!--  <x-input title="QQ号" placeholder="请输入QQ号" v-model="QQNo"></x-input>
      <x-input title=" 微博" placeholder="请输入微博帐号" v-model="WeChatNo"></x-input> -->
      <!-- <x-input title="城市：" placeholder="选择城市"></x-input> -->
    </group>
    <div>
      <alert v-model="alert" >{{title}}</alert>
    </div>
    <box gap="20px 20px">
      <x-button type="primary" :text="txt" :disabled="processButton"  @click.native="Validform"></x-button>
    </box>
    <App-Mask :mask="mask"></App-Mask>
    <loading :show="isLoading"></loading>
  </div>
</template>

<script>
import AppMask from '../../components/mask/Mask'
import Alert from 'vux/src/components/alert'
import Box from 'vux/src/components/box'
import XInput from 'vux/src/components/x-input'
import XButton from 'vux/src/components/x-button'
import Group from 'vux/src/components/group'
import Selector from 'vux/src/components/selector'
import Datetime from 'vux/src/components/datetime'
import XAddress from 'vux/src/components/x-address'
import {Loading, ChinaAddressV3Data} from 'vux'

let timeDate = Number(new Date().toLocaleDateString().replace('/', '-').replace('/', '-').substr(0, 4)) - 27 + new Date().toLocaleDateString().replace('/', '-').replace('/', '-').substr(4)
export default {
  name: 'usersetting',
  components: {
    Box,
    Loading,
    XInput,
    XButton,
    Alert,
    Group,
    Selector,
    Datetime,
    XAddress,
    ChinaAddressV3Data,
    AppMask
    // AppHeader
  },
  data () {
    return {
       // new Date().toLocaleDateString().replace('/', '-').replace('/', '-')
      timeDate: timeDate,
      alert: false,
      isLoading: false,
      title: '',
      Name: '',
      createdTime: '',
      current: '',
      userbirth: '',
      userbirth1: '',
      birthday: '',
      Sex: '',
      txt: '',
      Address: [],
      ChinaAddressData: ChinaAddressV3Data,
      SexList: [{
        key: 1,
        value: '男'
      }, {
        key: 2,
        value: '女'
      }],
      mask: {
        'isShow1': false,
        'isShow2': false,
        'isShow3': false
      },
      isShow1: false,
      isShow2: false,
      disabled: false,
      priasePath: sessionStorage.getItem('praisePath') || ''
    }
  },
  computed: {
    processButton () {
      if (this.Name !== '' && this.Birthday !== '' && this.Sex !== '') {
        this.disabled = false
        this.txt = '提交信息领取新人礼'
        return this.disabled
      } else {
        this.disabled = false
        this.txt = '填写信息领取新人礼'
        return this.disabled
      }
    }
  },
  created () {
    // console.log(new Date().toLocaleDateString())
    this.getUserInfo()
  },
  methods: {
    resetDate (date) {
      return date + this.userbirth.substr(4, this.userbirth.length)
    },
    // 获取个人信息
    getUserInfo () {
      this.$axios.post(this.apidomain + '/api/cust/queryCustInfo/' + this.getCookie('appid'), {
        wxOpenId: this.getCookie('openid')
      })
      .then((response) => {
        this.Name = response.data.data.name
        this.userbirth = response.data.data.birthday
        if (response.data.data.gender !== 0) {
          this.Sex = response.data.data.gender
        }
        if (response.data.data.birthday === '') {
          this.isShow2 = true
        } else {
          this.isShow1 = true
          this.userbirth1 = this.userbirth.substr(0, 4)
        }
        if (response.data.data.province !== '' || response.data.data.city !== '' || response.data.data.district !== '') {
          this.Address[0] = response.data.data.province
          this.Address[1] = response.data.data.city
          this.Address[2] = response.data.data.district
          this.Address = this.Address.slice()
        }
      })
      .catch((error) => {
        console.log(error)
      })
    },
    onSelectBirthdayChange (val) {
      document.getElementsByClassName('vux-datetime-value').item(0).classList.add('Birthday', 'current')
    },
    // 保存数据,发送请求
    Validform () {
      // 向newgift传递数据
      // const userInfo = JSON.parse(localStorage.userInfo)
      if (this.isShow1 === true) {
        this.birthday = this.userbirth1 + this.userbirth.substr(4, this.userbirth.length)
      }
      if (this.isShow2 === true) {
        this.birthday = this.userbirth
      }
      if (this.Name !== '' && this.birthday !== '' && this.Sex !== '') {
        this.disabled = true
        this.isLoading = true
        this.$axios.post(this.apidomain + '/api/giftCert/getNewCustGift/' + this.getCookie('appid'), {
          openId: this.getCookie('openid'),
          activityType: '1',
          name: this.Name,
          gender: this.Sex,
          birthday: this.birthday,
          province: this.Address[0],
          city: this.Address[1],
          district: this.Address[2]
        })
        .then((response) => {
          if (response.data.errorCode === '0') {
            this.isLoading = false
            if (this.priasePath !== '') {
              localStorage.product = JSON.stringify(response.data.data)
              setTimeout(() => {
                this.routeto(this.priasePath, {
                  oid: this.$route.query.oid || '',
                  mid: this.$route.query.mid || '',
                  brandid: this.$route.query.brandid || '1',
                  sid: this.$route.query.sid || ''
                })
              }, 200)
            } else {
              if (response.data.data.type === 'coupon') {
                window.zhuge.track('Click', {
                  '事件名称': '信息完善-录入信息-保存-点击',
                  'OpenID': this.getCookie('openid'),
                  '姓名': this.Name,
                  '访问时间': new Date().toLocaleString(),
                  '新人礼名称': '优惠券'
                })
                this.$set(this.mask, 'data', response.data.data)
                this.$set(this.mask, 'isShow1', true)
              }
              if (response.data.data.type === 'point') {
                window.zhuge.track('Click', {
                  '事件名称': '信息完善-录入信息-保存-点击',
                  'OpenID': this.getCookie('openid'),
                  '姓名': this.Name,
                  '访问时间': new Date().toLocaleString(),
                  '新人礼名称': '积分'
                })
                this.$set(this.mask, 'data', response.data.data)
                this.$set(this.mask, 'isShow2', true)
              }
              if (response.data.data.type === 'product') {
                // this.mask.data = response.data.data
                // this.$set(this.mask, 'data', response.data.data)
                // localStorage.product = JSON.stringify(this.mask)
                // this.$store.state.mask = this.mask
                window.zhuge.track('Click', {
                  '事件名称': '信息完善-录入信息-保存-点击',
                  '访问时间': new Date().toLocaleString(),
                  '姓名': this.Name,
                  'OpenID': this.getCookie('openid'),
                  '新人礼名称': '实物'
                }, () => {
                  this.routeto('newgift')
                })
              }
            }
          } else {
            window.alert(response.data.errorMsg)
            this.isLoading = false
          }
        })
        .catch((error) => {
          console.log(error)
          this.isLoading = false
        })
        // this.$router.push({path: '/newgift'})
      } else {
        this.alert = true
        this.title = '请完善您的个人信息'
      }
    }
  },
  watch: {
    Name: function (newVal, oldVal) {
      if (newVal !== '' && oldVal !== '' && newVal !== oldVal) {
        // console.log('new：%s，old：%s，b：%s，s：%s，w：%s，q：%s，a：%s，', newVal, oldVal, this.$data.Birthday, this.$data.Sex, this.$data.WeChatNo, this.$data.QQNo, this.$data.Address)
      }
    }
  }
}
</script>
<style lang="less">
@import "../../assets/less/usersetting/usersetting.less";
</style>
